{% extends 'index.html' %}
{% block ace-content %}
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
<link href="/static/dist/css/bootstrap-multiselect.css" rel="stylesheet">
<script src="/static/dist/js/bootstrap-multiselect.js"></script>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa   fa-floppy-o"></i>  <code>Wiki</code>知识</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
           <div class="col-lg-12">
               <div class="panel panel-default">
                   <div class="panel-heading">
						<i class="fa    fa-pencil-square-o"> </i> 修改文章
                   </div>
                   <div class="panel-body">
                       <div class="row">
                           <div class="col-lg-10">
                               <form role="form" class="main form-horizontal" >{% csrf_token %}
					<fieldset>
					<div class="form-group">
						 <label class="col-sm-2 control-label">标题</label>
						 <div class="col-sm-10">
						 	<input type="text" class="form-control" id="title" placeholder="文章标题" value="{{article.title}}" class="input-xlarge"  required/>
						 </div>
					</div>										
					<div class="form-group">
						 <label class="col-sm-2 control-label">内容</label>
						 <div class="col-sm-10">
						 	<textarea id="content" class="ckeditor">{{article.content}}</textarea>
						 </div>
					</div>	
		
					<div class="form-group">
						 <label class="col-sm-2 control-label">分类</label>
						 <div class="col-sm-2">
						   <select  class="form-control" name="category" id="select_category"   required>
						   		<option value="" name="category" >请选择分类</option>
						   		{% for ds in categoryList %}
						   			{% if article.category.id == ds.id %}
						   				<option value="{{ds.id}}" name="category" selected="selected">{{ds.name}}</option>
						   			{% else %}
										<option value="{{ds.id}}" name="category">{{ds.name}}</option>
									{% endif %}
								{% endfor %}			   		
							</select>
						 </div>											 
					</div>		
		
					<div class="form-group">
						 <label class="col-sm-2 control-label">标签</label>
						 <div class="col-sm-2 ">
						   <select multiple class="form-control" id="select_tag"  required>
						   		<option value="">请选择标签</option>
						   		{% for ds in tagList %}
						   			{% if ds.id in article.tag %}
						   				<option value="{{ds.id}}" name="tag" selected="selected">{{ds.name}}</option>
						   			{% else %}
										<option value="{{ds.id}}" name="tag">{{ds.name}}</option>
									{% endif %}
								{% endfor %}		   		
							</select>																							
						 </div>									 
					</div>	
					<div class="form-group">
						<label class="col-sm-2 control-label"></label>
						<div class="col-sm-2">
				 		<button type="button" id="button" onclick="EditWikiArticle(this)"  class="btn btn-default" >修改</button>
				 		</div>
					</div>											
					</form>                                        
                           </div>

                       <!-- /.row (nested) -->
                   </div>
                   <!-- /.panel-body -->
               </div>
               <div class="panel-footer"></div>
               <!-- /.panel -->
           </div>
	</div>    	
	  
</div>

<script type="text/javascript">

	$(document).ready(function() {
	    $('#select_tag').multiselect({
	        enableClickableOptGroups: true,
	        enableCollapsibleOptGroups: true,
	        includeSelectAllOption: true,
	       	enableFiltering: true,   
	       	buttonWidth: '205px'
	    });
	    $('#select_category').multiselect({
	        enableClickableOptGroups: true,
	        enableCollapsibleOptGroups: true,
	        includeSelectAllOption: true,
	       	enableFiltering: true,   
	       	buttonWidth: '205px'
	    });    
	});
	
	CKEDITOR.replace('content', {
	   filebrowserUploadUrl: '/wiki/upload/',
	   height: '500px',
	   width: '100%',	   
	});

	function getSelectValue(id){
	    var select = document.getElementById(id);
	    var val = [];
	    for(i=0;i<select.length;i++){
	        if(select.options[i].selected){
 	        	val.push(select[i].value); 
	        }
	    }
	    return val;
	}

	function EditWikiArticle(obj){
		tags = getSelectValue("select_tag")
		categorys = getSelectValue("select_category")
		if (tags.length == 0){
			window.wxc.xcConfirm("请选择一个标签", window.wxc.xcConfirm.typeEnum.error); 
			return false;
		};
		if (categorys.length == 0){
			window.wxc.xcConfirm("请选择一个分类", window.wxc.xcConfirm.typeEnum.error); 
			return false;
		}; 
		$.ajax({
			dataType: "JSON",
			url:'/wiki/edit/{{article.id}}/', //请求地址
			type:"POST",  //提交类似
			data:{
				"title":document.getElementById("title").value,
				"content":CKEDITOR.instances.content.getData(),
				"tag":tags,/* $('#select_tag option:selected').val(), */
				"category": $('#select_category option:selected').val(),
			}, //提交参数
			success:function(response){
                if (response["code"]=="200"){ 
                	window.wxc.xcConfirm("文章修改成功", window.wxc.xcConfirm.typeEnum.success);
      /*            	location.reload();  */
                }
	        	else{
	        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
	        	};					
			},
	    	error:function(response){
	   			window.wxc.xcConfirm("文章修改失败", window.wxc.xcConfirm.typeEnum.error); 
	    	}
		})		
	}
	
	function addWikiData(obj,op) {
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var post_data = {}; 
		if (op=="tag"){
			var putUrl = '/api/wiki/tag/';
			var form = document.getElementById('tag');
		}
		else if (op=="category"){
			var putUrl = '/api/wiki/category/';
			var form = document.getElementById('category');
		}
		for (var i = 0; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;
			if ( value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			}
			else{
				post_data[name] = value;
			};
			
		};
		$.ajax({
			dataType: "JSON",
			url:putUrl, //请求地址
			type:"POST",  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("添加成功", window.wxc.xcConfirm.typeEnum.success);
	/* 				location.reload();	 */		
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("添加失败", window.wxc.xcConfirm.typeEnum.error);
	/* 	    		location.reload(); */
	    	}
		})	
	}
</script>

{% endblock %}